<template>
  <div class="user">
    <!-- <h1>用户中心</h1>
    <button @click="logOut">退出</button> -->
    <div class="top">
      <img
        class="avatar"
        src="https://img0.baidu.com/it/u=2180898226,4144773777&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
      />
      <p>{{ user.nickName ? user.nickName : user.userName }}</p>
      <p>积分:{{ user.score }}</p>
    </div>
    <van-button
      icon="passed"
      type="primary"
      style="width: 35vw; display: block; margin: 8px auto"
      >签到</van-button
    >
    <van-divider />
    <van-cell-group>
      <van-cell title="我的积分" is-link :to="{ name: 'Scores' }" />
      <van-cell title="我的订单" is-link :to="{ name: 'Orders' }" />
      <van-cell title="个人信息" is-link :to="{ name: 'Info' }" />
      <van-cell title="修改密码" is-link :to="{ name: 'PWD' }" />
    </van-cell-group>
    <van-button
      type="danger"
      style="width: 70vw; display: block; margin: 8px auto"
      @click="logOut"
      >退出</van-button
    >
  </div>
</template>

<script>
import { removeToken } from "../utils/auth";
import { userInfoAPI } from "../service/auth";
export default {
  data() {
    return {
      user: {},
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    logOut() {
      removeToken("token");
      // 重置购物车信息
      this.$store.commit("resetCarts");
      this.$router.replace("/"); // replace 也可以直接跟字符串
    },
    async loadData() {
      const res = await userInfoAPI();
      // console.log(res);
      this.user = res.data;
    },
  },
};
</script>

<style scoped>
.top {
  background-color: #d35627cf;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
}
p {
  color: white;
}
.avatar {
  border-radius: 50%;
  width: 40vw;
}
</style>
